element table组件,使用checkbox控制表头的动态显示与隐藏后,排序恢复到默认状态的情况修复

在页面中,点击设置按钮在右边出现一个抽屉,在里面控制表头的动态显示与隐藏。当前端使用sortable属性给数据排序后,动态显示或隐藏的表头,会造成数据回到默认状态,不再根据设置的状态排序。具体如下图所示:

在这里插入图片描述
为了解决这个问题,我用了很多方法,包括对sort-change、sort-method以及default-sort属性的各种定义使用,但结果都不尽人意。因为当选择显示表头后,要关闭右边弹框,在关闭右边弹框定义的方法里面使用上面三个方法都没有生效,基本上都是因为这几个方法的参数的原因。

后来在想element的table组件,既然点击小按钮会进行排序,那肯定是调用了封装好的排序方法,于是我使this.$ refs.table查看了table组件下的属性和方法。果然,找到了sort()方法该方法需要传两个参数:prop和orde,prop代表的是需要进行排序的列的字段名称,order代表的是需要正序排序还是反序排序,order有三个值:ascendingdescending以及null。只需要打开右侧抽屉的时候记录下当前的排序状态,然后在关闭抽屉的时候使用 this.$refs.table.sort( prop , order ) 方法即可实现。

想要拿到打开右侧抽屉前的排序状态的方法有很多,在这里我列举两个:

  1. 通过sort-change方法
  2. 在打开右侧抽屉的方法中,使用this.$refs.table.columns获取到所有列,然后通过使用filter( ) 方法获取到需要排序的列,然后获取到该列的排序状态。

具体代码我就不展示了,思路已经在上面,代码不是重点,重要的是思路。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值